<template>
	<view class="bg-white min100">
		<u-navbar title="兑换记录" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		<view>
			<view class="padding-bottom-sm">
				<u-tabs :list="list" lineColor="#e60000" :itemStyle="{width: '33.3%', height: '88rpx'}" :activeStyle="{color: '#e60000'}" :inactiveStyle="{color: '#333333'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
			</view>
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in walletList" :key="index">
				<view class="flex justify-between font-15 text-bold">
					<view>{{item.incomeFlag ? '收入' : '支出'}}</view>
					<view>{{item.incomeFlag ? '+' : '-'}}{{item.amount}}</view>
				</view>
				<view class="font-13 margin-tb-sm">{{item.remark}}</view>
				<view class="flex justify-between font-13 text-gray">
					<view>{{item.createTime}}</view>
					<view>余额：{{item.afterAmount}}</view>
				</view>
			</view>
		</view>

    <!-- 无数据 -->
		<view class="flex justify-center">
      <image v-show="walletList.length == 0" src="@/static/index/no-data.png"></image>
    </view>
		<u-loadmore nomoreText="暂无更多数据...." :status="status" color="#999999" class="padding-bottom padding-top-xs"/>
		
	</view>
</template>

<script>
	import { storeWalletFlow } from '@/common/api/exchange.js';
	export default {
		data() {
			return {
				current: 0,
				list: [
					{name: '千积分'}
				],
				status: 'loading',
				pageNo: 0,
				walletList: [],
			};
		},
		onShow() {
			this.getwalletFlow()
		},
		onReachBottom() {
			if(this.status === 'nomore') return
			this.getwalletFlow()
		},
		methods: {
			getwalletFlow() {
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					incomeFlag: 1,
					pageSize: 10,
					bizCode: 601
				}
				storeWalletFlow(params,1).then(res => {
					this.walletList = this.walletList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.min100{
  min-height: 100vh;
}
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.level {
	background: linear-gradient(-90deg, #FF9701 0%, #FFB21F 100%);
	color: #ffffff;
	font-size: 24rpx;
	padding: 2rpx 20rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	min-width: 96rpx;
	text-align: center;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
</style>
